<template>
  <div class='mask'>
    <div class="block pr">
      <img
        src="./close.png"
        class='pa close'
        @click="$emit('close')"
      />
      <template>
        <div class="mybreadcrumb">
        </div>
      </template>

      <div
        class="content-table"
        id="printMe"
      >
        <div class="table-title">
          <slot name="title"></slot>
        </div>
        <div class="tablt-date">
          <slot name="sub-title"></slot>
        </div>
        <div class="demo-infinite-container modal-table">
          <v-data-table
            :headers="headers"
            :items="items"
            :pagination="pagination"
            @update:pagination="pagination=$event"
            :total-items="totalDesserts"
            :loading="loading"
            dark
            :rows-per-page-items='[15,30]'
            class="general-table fixed-header v-table__overflow"
            style="width: 100%;backface-visibility: hidden; width: 100%; height: calc((80vh - 150px) - 0px);"
          >
            <template v-slot:items="props">
              <tr>
                <td
                  v-for="c in columns"
                  :key="c.Name"
                  :style='{
                            "text-overflow": "ellipsis",
                            "-moz-text-overflow": "ellipsis",
                            overflow: "hidden",
                            "white-space": "nowrap",
                            ...(c.styleObj || {}),
                          }'
                >
                  <cell-vue
                    v-bind="c"
                    :info="c"
                    :template="null"
                    :render="null"
                    :model="props.item"
                  />
                </td>
              </tr>
            </template>
          </v-data-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import CellVue from "../../../components/Table/Cell.vue";
export default {
  name: "popup",
  components: {
    CellVue,
  },
  props: {
    title: String,
    columns: Array,
    req_url: String,
    filters: [],
  },
  data() {
    return {
      items: [],
      pagination: {},
      totalDesserts: 0,
      loading: false,
      widths:{
        '科室/申请人':'180px',
        '保修科室':'120px',
        '时间':'150px',
        '打分描述':'140px',
        '问题描述':'520px',
        '工程师':'100px',
        '电话':'140px',
        '验收时间':'140px',
        '处理记录':'140px',
        '用时':'150px',
        '状态':'120px',
        '维修费用':'120px',
        '保修类型':'120px',
      }
    };
  },
  computed: {
    headers() {
      const RepairName=this.columns.find(i=>i.Name==='RepairName')
      if(RepairName)RepairName.width='80px'
      return this.columns.map((v) => ({
        ...v,
        text: v.Description,
        value: v.Name,
        width: this.widths[v.Description] || "150px",
        sortable: false,
      }));
    },
  },
  watch: {
    pagination: {
      handler: "loadData",
      deep: true,
    },
  },
  mounted() {
    this.loadData = _.debounce(this.loadData, 500).bind(this);
    // this.loadData();
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        const { page, rowsPerPage } = this.pagination;
        const { Data, Total } = await this.$http.post(this.req_url, {
          PageIndex: page || 1,
          PageSize: rowsPerPage || 15,
          SortInfo: {
            Name: "Id",
            Mode: "desc",
          },
          Condition: {
            Filters: this.filters,
          },
        });
        this.items = Data;
        this.totalDesserts = Total;
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="stylus">
.mask {
  position: relative;

  .close {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 100;
  }

  table {
    table-layout: fixed;
  }

  .theme--dark.v-table {
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  .theme--dark.v-table thead th{
    background-color: #005a49;
    text-align: center !important;
    font-size: 14px;
  }

  .theme--dark.v-table td,.theme--dark.v-table thead th{
    border: 1px solid #013229 !important;
    padding: 0 16px !important;
    height :32px;
    line-height 32px
  }
  .theme--dark.v-table tr:hover{
    background: #00876c26 !important;
    background-color: #00876c26 !important;
  }
}
.block{
  background: #001612 !important;
}
.theme--dark.v-datatable .v-datatable__actions{
  background-color: #001612 !important;
}
::v-deep .v-datatabley > tr:hover>td{
  background: #00876c26 !important;
  background-color: #00876c26 !important;
}
</style>